<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>大卫杜夫 | 雪茄</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="shortcut icon" type="image/ico" href="http://davidoff.com/favicon.ico" />
	<link href="../static/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
	<link href="../static/css/main.css" rel="stylesheet">
</head>

<body>
	<div id="header"></div>
	<div class="map_mainbox page_wrapper">
		<div class="row">
			<div class="col-sm-12 col-md-5 col-lg-5 col-xl-5">
				<div class="storebox">
					<div class="search"><input type="text" placeholder="" class="search_text" onkeydown="enterSearch()"><input type="button" class="btn_search"
						 onclick="search()"></div>
					<div class="storelistbox" id="wp">
						<script id="tpl" type="text/html">
							<%for(var i = 0; i < list.length; i++) {%>
						<div class="storelist" onclick="getLoc(<%:=i%>)">
							<div class="tt">
								<h1><%:=list[i].STORE_NAME_EN%></h1>
								<h2><%:=list[i].STORE_NAME%></h2>
								<span><%:=list[i].CITY%></span>
							</div>
							<div class="img">
								<img src="<%:=list[i].QR_CODE_IMG%>">
							</div>
							<div class="clear"></div>
							<div class="phonebox">
								<div><span class="label">电话&gt;</span><%:=list[i].TEL%></div>
								<div class="store_addr"><span class="label">地址&gt;</span><%:=list[i].ADDR%></div>
							</div>
                        </div>
                        <%}%>
	                </script>
					</div>
				</div>
			</div>
			<div class="col-sm-12 col-md-7 col-lg-7 col-xl-7">
				<div class="overlay"></div>
				<div class="map_ditubox">
					<div id="map_ditu"></div>
				</div>
			</div>
		</div>
	</div>
	<!--footer start  -->
	<div id="footer"></div>
	<!--footer end  -->
	<script type="text/javascript" src="../static/lib/fancyBox-2.1.5/lib/jquery-1.10.1.min.js"></script>
	<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OLHBZ-SCFC6-5PESS-EDGTY-BCYWH-LDB7L"></script>
	<script src="../static/lib/bootstrap/dist/js/bootstrap.min.js"></script>
	<script src="../static/js/common.js"></script>
	<script src="../static/js/template.js"></script>
	<script>
		var myLatitude = 0,
			myLongitude = 0;
		var StoreList;
		var tpl;
        function enterSearch(){
            if(event.keyCode==13)
    {
        search();
    }
        }
		function search() {
			var keyword = $(".search_text").val()
			var storeArr = StoreList.filter(function (elem) {
				return elem.STORE_NAME.indexOf(keyword) != -1 || elem.STORE_NAME_EN.indexOf(keyword) != -1 || elem.ADDR.indexOf(
					keyword) != -1
			});
			console.log(storeArr);
			var loc = storeArr[0].LOC_X.split(',');
			showmap(loc[0], loc[1]);
			//	var tpl = document.getElementById('tpl').innerHTML;
			var html = template(tpl, {
				list: storeArr
			});
			document.getElementById('wp').innerHTML = html;
		}

		function getLoc(idx) {
			var loc = StoreList[idx].LOC_X.split(',');
			showmap(loc[0], loc[1]);
		}

		function mapResize() {
			var winWidth = $(window).width();
			if (winWidth <= 768) {
				$(".storelist").bind("click", function () {
					$(".overlay,.map_ditubox").show();
				})
			}
		}
		$(function () {
			$(".overlay").bind("click", function () {
				$(".overlay,.map_ditubox").hide();
			})
			mapResize();
			$(window).resize(function () {
				mapResize();
			})
			let prdParams={
				"cmd": "store.list.get",
				"param": {
					"KEY_WORD": "",
					"PAGE_INDEX": 1,
					"PAGE_SIZE": 10000
				}
			}
			$.ajax({
				type: "POST",
				url: "http://davidoff.gemdesign.cn/CMS/api/CMS",
				contentType: "application/json; charset=utf-8",
				data: JSON.stringify(prdParams),
				dataType: "json",
				success: function (data) {
					StoreList = data.StoreList;
				var loc = StoreList[0].LOC_X.split(',');
				showmap(loc[0], loc[1]);
				tpl = document.getElementById('tpl').innerHTML;
				var html = template(tpl, {
					list: StoreList
				});
				document.getElementById('wp').innerHTML = html;
				},
				error: function (message) {
					alert(message)
				}
			});
		})

		function showmap(myLatitude, myLongitude) {
			map = new qq.maps.Map(
				document.getElementById("map_ditu"), {
					center: new qq.maps.LatLng(myLatitude, myLongitude),
					zoom: 13,
					draggable: true,
					scrollwheel: true,
					disableDoubleClickZoom: false
				}
			);
		}

	</script>
</body>

</html>
